<template>
  <div  style="background-color: white;width: 100%;height: 100%;">
    <div style="height: 17px"></div>
    <textarea   style="width: calc(100% - 37px);height: calc(100% - 35px);font-size: 16px;margin-left: 15px;margin-right: 15px" @click="inputFocus" @input="change" class="drag-cancel" v-model="compValue">
    </textarea>
    <div style="height: 15px"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      compValue:this.value
    }
  },
  props: {
    value: String,
  },
  watch:{
    value(value){
      this.compValue=value
    }
  },
  methods:{
    change(){
      this.$emit('changeValue',this.compValue);
    },
    inputFocus(){
      this.$emit('inputFocus');
    }
  }
}
</script>

<style scoped>
textarea{
  resize: none;
  border: 0;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
}
</style>